<!DOCTYPE html>
<html lang="zh-cn">

<head>

    <meta content="text/html;charset=utf-8" http-equiv="content-type">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

    <title>滑雪族 - 产品详情</title>

    <!-- Bootstrap Core CSS -->
<!-- MetisMenu CSS -->
<!-- Custom CSS -->
<!-- Custom Fonts -->
    <!--webuploader 引入CSS-->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link rel="stylesheet" href="/server/r/bower_components/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/server/r/bower_components/metisMenu/dist/metisMenu.min.css" />
    <link rel="stylesheet" href="/server/r/static/css/sb-admin-2_e507c2b.css" />
    <link rel="stylesheet" type="text/css" href="/server/r/bower_components/font-awesome/css/font-awesome.min.css" />
    <link type="text/css" rel="stylesheet" href="/server/r/static/css/hxz/common_2baa698.css" />
    <link rel="stylesheet" type="text/css" href="/server/r/bower_components/alertify/themes/alertify.core.css" />
    <link rel="stylesheet" type="text/css" href="/server/r/bower_components/alertify/themes/alertify.bootstrap.css" />
    <link rel="stylesheet" type="text/css"
          data-loader href="/server/r/bower_components/fex-webuploader/dist/webuploader.css" />
    <link type="text/css" rel="stylesheet" data-loader href="/server/r/vendor/umeditor/themes/default/css/umeditor.min.css" />
    <link rel="stylesheet" type="text/css" data-loader href="/server/r/bower_components/cropper/dist/cropper.min.css" />
    <link type="text/css" rel="stylesheet" href="/server/r/bower_components/select2/dist/css/select2.min.css" />
</head>

<body>
<div id="wrapper">

    <div class="modal fade" id="show-reply-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 800px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">查看回复</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <table class="table table-striped table-bordered table-hover">
                            <thead>
                            <tr class="warning">
                                <th>回复内容</th>
                                <th>时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="show-reply-list"></tbody>
                        </table>
                    </div>
                    <div class="form-group" style="text-align: center;">
                    </div>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="reply-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <input type="hidden" id="hiden-reply-target-id" value="">
        <div class="modal-dialog" style="width: 360px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">回复</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>回复内容：</label>
                        <textarea id="reply-content" class="form-control" rows="3"></textarea>
                    </div>
                    <div class="form-group" style="text-align: center;">
                        <button class="btn btn-sm btn-success" id="reply-submit">添加</button>
                    </div>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">

        <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="activity-list">滑雪族 管理</a>
</div>
<!-- /.navbar-header -->

<ul class="nav navbar-top-links navbar-right">
  <!-- /.dropdown -->
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
    </a>
    <ul class="dropdown-menu dropdown-user">
      <li><a href="/manage/logout"><i class="fa fa-sign-out fa-fw"></i> 退出系统</a>
      </li>
    </ul>
    <!-- /.dropdown-user -->
  </li>
  <!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->

        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">
  <li>
    <a href="#"><i class="fa fa-asterisk fa-fw"></i> 产品管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/activity-list"> 产品查询</a>
      </li>
      <li>
        <a href="/manage/manage-organizer-render-activity"> 产品显示控制</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="/#"><i class="fa fa-male fa-fw"></i> 报名管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/player-list"> 报名查询</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#"><i class="fa fa-list-alt fa-fw"></i> 订单管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/order-list"> 订单查询</a>
      </li>
      <li>
        <a href="/manage/refund-list"> 退款管理</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-check-circle fa-fw"></i> 主办方认证<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/organizer-edit"> 创建主办方</a>
      </li>
      <li>
        <a href="/manage/organizer-list"> 主办方列表</a>
      </li>
      <li>
        <a href="/manage/organizer-print"> 冬令营打印设置</a>
      </li>

    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-picture-o fa-fw"></i> 雪场管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/ski-field-edit"> 创建雪场</a>
      </li>
      <li>
        <a href="/manage/ski-field-list"> 雪场列表</a>
      </li>

    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-users fa-fw"></i> 教练管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/coach-list"> 预约情况</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-credit-card fa-fw"></i> 结算管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/manage-transfer-list"> 转账管理</a>
      </li>
      <li>
        <a href="/manage/manage-withdrawals-apply-list"> 提现申请</a>
      </li>
      <li>
        <a href="/manage/manage-withdrawals-record-list"> 结算列表</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-rmb fa-fw"></i> 财务管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/stream-list"> 交易流水</a>
      </li>
      <li>
        <a href="/manage/manage-bill-record-list"> 对账列表</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-dollar fa-fw"></i> 营销管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/marketing-list"> 返利管理</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-comments fa-fw"></i> 评价管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/comment-list">评价管理</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#"><i class="fa fa-tasks fa-fw"></i> 定时处理管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/quartz-list"> 定时处理列表</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-wechat fa-fw"></i> 微信页面管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/typography-list"> 微信首页管理</a>
      </li>
      <li>
        <a href="/manage/activity-weight-manage"> 活动置顶</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
</ul>
            </div>
            <!-- /.sidebar-collapse -->
        </div>
        <!-- /.navbar-static-side -->
    </nav>

    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h3 class="page-header">
                    评价管理
                </h3>
            </div>
            <!-- /.col-lg-12 -->
        </div>

        <div class="form-inline">
            <div class="form-group">
                <label>产品名称：</label>
                <select class="form-control" id="select-activity"></select>
            </div>
            <div class="form-group">
                <a id="activity-filter-btn" class="btn btn-sm btn-success btn-outline">查询</a>
                <a href="/manage/comment-list" type="button" class="btn btn-sm btn-success btn-outline">全部</a>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        评价列表
                        <div class="pull-right">
                            (共查询：<label id="comment-count"></label>条记录)
                        </div>
                    </div>
                    <!-- /.panel-heading -->
                    <div class="panel-body">
                        <div class="dataTable_wrapper">
                            <table class="table table-striped table-bordered table-hover">
                                <thead>
                                <tr class="warning">
                                    <th width="100">姓名</th>
                                    <th width="200">评论</th>
                                    <th width="70">分数</th>
                                    <th width="200">主办方</th>
                                    <th width="200">活动标题</th>
                                    <th width="150">回复数</th>
                                    <th width="300">时间</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="comment-list-body"></tbody>
                            </table>
                        </div>

                        <!-- /.row -->
                        <div class="pagination dataTables_paginate paging_simple_numbers pull-right" id="pagination" role="status" aria-live="polite"></div>
                    </div>
                    <!-- /.panel-body -->
                </div>
                <!-- /.panel -->
            </div>
            <!-- /.col-lg-12 -->
        </div>
    </div>
    <!-- /#page-wrapper -->

</div>
<!-- /#wrapper -->
<script id="tpl-show-reply-list-item" type="text/template">
    <tr>
        <td>
            <div style="width: 560px;word-break: break-all;">
                {{operator}}：{{replyContent}}
            </div>
        </td>
        <td>{{datetime(replyTime)}}</td>
        <td>
            <button class="btn btn-danger btn-info btn-xs delete-reply" data-commentid="{{replyId}}">删除</button>
        </td>
    </tr>
</script>

<script id="tpl-comment-list-item" type="text/template">
    <tr>
        <td>{{name}}</td>
        <td>
            <div style="width: 500px;word-break: break-all;">
                {{content}}
            </div>
        </td>
        <td>{{star}}星</td>
        <td>{{orgName}}</td>
        <td>{{title}}</td>
        <td>
            （{{replyCount}}）条
            <button class="btn btn-fix btn-info btn-xs show-reply" data-commentid="{{commentId}}" data-index="{{dataIndex}}">查看</button>
        </td>
        <td>{{datetime(createTime)}}</td>
        <td>
            <button class="btn btn-danger btn-info btn-xs delete-comment" data-commentid="{{commentId}}">删除</button>
        </td>
    </tr>
</script>


<!-- Modal -->
<div class="modal fade" id="activity-preview" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">产品手机版二维码</h4>
      </div>
      <div class="modal-body" style="padding-left: 145px;">
        <img src="/server/r/static/images/qrcode.png" style="width: 300px;height: 300px;">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div id="hxz-background" class="background" style="display: none; "></div>
<div id="hxz-progressBar" class="progressBar" style="display: none; ">数据加载中，请稍等...</div>

<script src="/server/r/require.js"></script>
<script>/*resourcemap*/
require.config({paths:{
  "r/bower_components/jquery/dist/jquery.min": "/server/r/bower_components/jquery/dist/jquery.min",
  "r/bower_components/underscore/underscore-min": "/server/r/bower_components/underscore/underscore-min",
  "r/static/js/hxz/hxz.valid": "/server/r/static/js/hxz/hxz.valid_12cc206",
  "r/static/js/hxz/hxz.rest": "/server/r/static/js/hxz/hxz.rest_07c8105",
  "r/bower_components/alertify/alertify.min": "/server/r/bower_components/alertify/alertify.min",
  "r/static/js/alertify-config": "/server/r/static/js/alertify-config_0cc8db2",
  "r/bower_components/bootstrap/dist/js/bootstrap.min": "/server/r/bower_components/bootstrap/dist/js/bootstrap.min",
  "r/bower_components/metisMenu/dist/metisMenu.min": "/server/r/bower_components/metisMenu/dist/metisMenu.min",
  "r/bower_components/select2/dist/js/select2": "/server/r/bower_components/select2/dist/js/select2",
  "r/static/js/hxz/hxz.ui": "/server/r/static/js/hxz/hxz.ui_0a7714d",
  "r/static/js/hxz/hxz": "/server/r/static/js/hxz/hxz_589b155",
  "r/vendor/pagination/jquery.pagination": "/server/r/vendor/pagination/jquery.pagination"
}});

    /**
     * Created by lihao on 16/1/7.
     */
    require(["r/bower_components/jquery/dist/jquery.min", "r/static/js/hxz/hxz", "r/static/js/alertify-config", "r/vendor/pagination/jquery.pagination", "r/bower_components/select2/dist/js/select2"], function ($, hxz, alertify) {

        var paginationFlag = true;
        var pageList = [];
        var organizerListFilter = {};

        function fetchOption() {
            hxz.doGet({url: hxz.RestApi.manageOrgOption}, function (data) {
                $("#select-activity").select2({
                    language: "zh-CN",
                    placeholder: "请选择主办方",
                    width: "450",
                    data: data.data
                });
            });
        }

        function fetchCommentList(page) {

            var apiCommentList = hxz.RestApi.organizerCommentList;

            if (!page) {
                page = "1";
            }

            apiCommentList = apiCommentList + "?page=" + page;

            if (organizerListFilter && organizerListFilter.organizerId) {
                apiCommentList = apiCommentList + "&organizerId=" + organizerListFilter.organizerId;
            }

            hxz.doGet({url: apiCommentList}, function (data) {

                if (data.status == "0") {
                    return alertify.log(data.msg);
                }

                pageList = data.data.dataList;

                if (!pageList || pageList.length == 0) {
                    $("#comment-list-body").html("暂无评论");
                }

                render(data.data.dataList, page, data.data.count);
            });
        }

        function pagination(data, callback) {
            $('#pagination').pagination(count, {
                current_page: 0,
                items_per_page: 10,
                num_display_entries: 6,
                callback: function (page) {
                    //模拟ajax去后端读取页数，获取数据并渲染列表的过程
                    callback(page + 1);
                },
                load_first_page: false,
                prev_text: '上一页',
                next_text: '下一页'
            });
        }

        function render(dataList, page, count) {

            $("#comment-count").html(count);
            var tpl = _.template($('#tpl-comment-list-item').html());
            $("#comment-list-body").html("");

            for (var i = 0; i < dataList.length; i++) {

                var _data = dataList[i];

                _data.datetime = hxz.datetime;
                _data.replyCount = _data.replyList.length;
                _data.dataIndex = i;

                $("#comment-list-body").append(tpl(_data));
            }

            if (paginationFlag) {
                paginationFlag = false;
                $('#pagination').pagination(count, {
                    current_page: 0,
                    items_per_page: 10,
                    num_display_entries: 6,
                    callback: function (page_id) {
                        //模拟ajax去后端读取页数，获取数据并渲染列表的过程
                        fetchCommentList(page_id + 1);
                    },
                    load_first_page: false,
                    prev_text: '上一页',
                    next_text: '下一页'
                });
            }
        }

        $("#reply-submit").on("click", function () {

            var targetId = $("#hiden-reply-target-id").val();
            var content = $("#reply-content").val();

            var data = {
                commentId: targetId,
                content: content
            };

            hxz.doPost({url: hxz.RestApi.activityCommentAdd, data: data}, function (data) {
                if (data.status == "0") {
                    return alertify.log("系统错误");
                }

                $("#reply-modal").modal("hide");
                alertify.log(data.msg);
                fetchCommentList(1);
            });
        });


        function renderReplyList(replyDataList) {
            if (replyDataList.length == 0) {
                $("#show-reply-list").html("暂无回复");
                return;
            }

            $("#show-reply-list").html("");
            var tpl = _.template($('#tpl-show-reply-list-item').html());
            for (var i = 0; i < replyDataList.length; i++) {
                replyDataList[i].datetime = hxz.datetime;
                $("#show-reply-list").append(tpl(replyDataList[i]));
            }
        }

        $("#comment-list-body").on("click", ".show-reply", function (e) {
            var index = $(e.target).data("index");
            var data = pageList[index];
            renderReplyList(data.replyList);

            $("#show-reply-modal").modal("show");
        });

        $("#comment-list-body").on("click", ".deal-reply", function (e) {
            var commentId = $(e.target).data("commentid");
            $("#hiden-reply-target-id").val(commentId);
            $("#reply-modal").modal("show");
        });

        $("#activity-filter-btn").unbind("click").on("click", function () {
            organizerListFilter.organizerId = $("#select-activity").val();
            paginationFlag = true;
            fetchCommentList(1);
        });


        //删除回复
        $("#show-reply-list").on("click", ".delete-reply", function (e) {

            var commentId = $(e.target).data("commentid");

            var data = {
                commentId: commentId
            };

            hxz.doPost({url: hxz.RestApi.manageCommentDelete, data: data}, function (data) {

                if (data.status == "0") {
                    return alertify.log("系统错误");
                }

                alertify.log(data.msg);
                fetchCommentList(1);
            });
        });

        //删除评论
        $("#comment-list-body").on("click", ".delete-comment", function (e) {

            var commentId = $(e.target).data("commentid");

            var data = {
                commentId: commentId
            };

            hxz.doPost({url: hxz.RestApi.manageCommentDelete, data: data}, function (data) {

                if (data.status == "0") {
                    return alertify.log("系统错误");
                }

                alertify.log(data.msg);
                fetchCommentList(1);
            });
        });

        function pageInit() {
            pagination = true;
            fetchCommentList(1);
            fetchOption();
        }

        // 执行初始化
        pageInit();
    });

</script>
</body>

</html>